<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const fakeData = [
      {
        type: "gridOne",
        category: "container",
        icon: "gridOne",
        cols: [
          {
            type: "grid-col",
            category: "container",
            icon: "grid-col",
            internal: true,
            widgetList: [],
            plate: {
              value: "1622539903105142785",
              name: "图片版块",
              limit: 6,
              type: "column_picture",
              id: "grid-col-642889340660",
            },
            options: {
              name: "",
              hidden: false,
              span: 12,
              offset: 0,
              push: 0,
              pull: 0,
              responsive: false,
              md: 12,
              sm: 12,
              xs: 12,
            },
            id: "grid-col-642889340660",
          },
        ],
        options: {
          name: "",
          hidden: false,
          colWidthRate: "12",
          gutter: 12,
          colHeight: 300,
        },
        id: 64288934066,
        children: [
          {
            value: "1622539903105142785",
            name: "图片版块",
            limit: 6,
            type: "column_picture",
            id: "grid-col-642889340660",
          },
        ],
      },
      {
        type: "gridTwo",
        category: "container",
        icon: "gridTwo",
        cols: [
          {
            type: "grid-col",
            category: "container",
            icon: "grid-col",
            internal: true,
            widgetList: [
              {
                type: "gridTwo",
                category: "container",
                icon: "gridTwo",
                cols: [
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    widgetList: [],
                    plate: {
                      value: "1622837202163240962",
                      name: "列表版块",
                      limit: 6,
                      type: "column_list",
                    },
                    options: {
                      name: "",
                      hidden: false,
                      colWidthRate: 12,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-334336952370",
                  },
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    plate: {
                      value: "1622837202163240962",
                      name: "列表版块",
                      limit: 6,
                      type: "column_list",
                    },
                    widgetList: [],
                    options: {
                      name: "",
                      hidden: false,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-334336952371",
                  },
                ],
                options: {
                  name: "",
                  hidden: false,
                  colWidthRate: "6:6",
                  gutter: 12,
                  colHeight: 300,
                },
                id: 33433695237,
              },
            ],
            plate: "",
            options: {
              name: "",
              hidden: false,
              colWidthRate: 12,
              span: 12,
              offset: 0,
              push: 0,
              pull: 0,
              responsive: false,
              md: 12,
              sm: 12,
              xs: 12,
            },
            id: "grid-col-1083358202230",
          },
          {
            type: "grid-col",
            category: "container",
            icon: "grid-col",
            internal: true,
            plate: "",
            widgetList: [
              {
                type: "tab",
                category: "container",
                icon: "tab",
                activeKey: 1,
                tabs: [
                  {
                    name: "tab1",
                    key: 1,
                    plate: "",
                    widgetList: [
                      {
                        type: "gridOne",
                        category: "container",
                        icon: "gridOne",
                        cols: [
                          {
                            type: "grid-col",
                            category: "container",
                            icon: "grid-col",
                            internal: true,
                            widgetList: [],
                            plate: {
                              value: "1622841378561757185",
                              name: "视频版块",
                              limit: 6,
                              type: "column_video",
                            },
                            options: {
                              name: "",
                              hidden: false,
                              span: 12,
                              offset: 0,
                              push: 0,
                              pull: 0,
                              responsive: false,
                              md: 12,
                              sm: 12,
                              xs: 12,
                            },
                            id: "grid-col-422178431230",
                          },
                        ],
                        options: {
                          name: "",
                          hidden: false,
                          colWidthRate: "12",
                          gutter: 12,
                          colHeight: 300,
                        },
                        id: 42217843123,
                      },
                    ],
                    id: "tab-1006904865450",
                    children: [
                      {
                        value: "1622841378561757185",
                        name: "视频版块",
                        limit: 6,
                        type: "column_video",
                      },
                    ],
                  },
                ],
                options: { name: "", hidden: false },
                id: 100690486545,
              },
            ],
            options: {
              name: "",
              hidden: false,
              span: 12,
              offset: 0,
              push: 0,
              pull: 0,
              responsive: false,
              md: 12,
              sm: 12,
              xs: 12,
            },
            id: "grid-col-1083358202231",
          },
        ],
        options: {
          name: "",
          hidden: false,
          colWidthRate: "6:6",
          gutter: 12,
          colHeight: 300,
        },
        id: 108335820223,
        children: [
          {
            value: "1622837202163240962",
            name: "列表版块",
            limit: 6,
            type: "column_list",
          },
          {
            value: "1622837202163240962",
            name: "列表版块",
            limit: 6,
            type: "column_list",
          },
          {
            type: "tab",
            category: "container",
            icon: "tab",
            activeKey: 1,
            tabs: [
              {
                name: "tab1",
                key: 1,
                plate: "",
                widgetList: [
                  {
                    type: "gridOne",
                    category: "container",
                    icon: "gridOne",
                    cols: [
                      {
                        type: "grid-col",
                        category: "container",
                        icon: "grid-col",
                        internal: true,
                        widgetList: [],
                        plate: {
                          value: "1622841378561757185",
                          name: "视频版块",
                          limit: 6,
                          type: "column_video",
                        },
                        options: {
                          name: "",
                          hidden: false,
                          span: 12,
                          offset: 0,
                          push: 0,
                          pull: 0,
                          responsive: false,
                          md: 12,
                          sm: 12,
                          xs: 12,
                        },
                        id: "grid-col-422178431230",
                      },
                    ],
                    options: {
                      name: "",
                      hidden: false,
                      colWidthRate: "12",
                      gutter: 12,
                      colHeight: 300,
                    },
                    id: 42217843123,
                  },
                ],
                id: "tab-1006904865450",
                children: [
                  {
                    value: "1622841378561757185",
                    name: "视频版块",
                    limit: 6,
                    type: "column_video",
                  },
                ],
              },
            ],
            options: { name: "", hidden: false },
            id: 100690486545,
          },
        ],
      },
      {
        type: "gridThree",
        category: "container",
        icon: "gridThree",
        cols: [
          {
            type: "grid-col",
            category: "container",
            icon: "grid-col",
            internal: true,
            plate: {
              value: "1622539903105142785",
              name: "图片版块",
              limit: 6,
              type: "column_picture",
              id: "grid-col-674028386410",
            },
            widgetList: [],
            options: {
              name: "",
              hidden: false,
              span: 12,
              offset: 0,
              push: 0,
              pull: 0,
              responsive: false,
              md: 12,
              sm: 12,
              xs: 12,
            },
            id: "grid-col-674028386410",
          },
          {
            type: "grid-col",
            category: "container",
            icon: "grid-col",
            internal: true,
            plate: {
              value: "1622837202163240962",
              name: "列表版块",
              limit: 6,
              type: "column_list",
              id: "grid-col-674028386411",
            },
            widgetList: [],
            options: {
              name: "",
              hidden: false,
              span: 12,
              offset: 0,
              push: 0,
              pull: 0,
              responsive: false,
              md: 12,
              sm: 12,
              xs: 12,
            },
            id: "grid-col-674028386411",
          },
          {
            type: "grid-col",
            category: "container",
            icon: "grid-col",
            internal: true,
            plate: {
              value: "1622841378561757185",
              name: "视频版块",
              limit: 6,
              type: "column_video",
              id: "grid-col-674028386412",
            },
            widgetList: [],
            options: {
              name: "",
              hidden: false,
              span: 12,
              offset: 0,
              push: 0,
              pull: 0,
              responsive: false,
              md: 12,
              sm: 12,
              xs: 12,
            },
            id: "grid-col-674028386412",
          },
        ],
        options: {
          name: "",
          colWidthRate: "4:4:4",
          hidden: false,
          gutter: 12,
          colHeight: 300,
        },
        id: 67402838641,
        children: [
          {
            value: "1622841378561757185",
            name: "视频版块",
            limit: 6,
            type: "column_video",
            id: "grid-col-674028386412",
          },
        ],
      },
      {
        type: "tab",
        category: "container",
        icon: "tab",
        activeKey: 2,
        tabs: [
          {
            name: "tab1",
            key: 1,
            plate: "",
            widgetList: [
              {
                type: "gridFour",
                category: "container",
                icon: "gridFour",
                cols: [
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    plate: {
                      value: "1622539903105142785",
                      name: "图片版块",
                      limit: 6,
                      type: "column_picture",
                    },
                    widgetList: [],
                    options: {
                      name: "",
                      hidden: false,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-356253525520",
                  },
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    plate: {
                      value: "1622837202163240962",
                      name: "列表版块",
                      limit: 6,
                      type: "column_list",
                    },
                    widgetList: [],
                    options: {
                      name: "",
                      hidden: false,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-356253525521",
                  },
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    plate: {
                      value: "1622841378561757185",
                      name: "视频版块",
                      limit: 6,
                      type: "column_video",
                    },
                    widgetList: [],
                    options: {
                      name: "",
                      hidden: false,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-356253525522",
                  },
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    plate: {
                      value: "1622842293201047554",
                      name: "专题分类",
                      limit: 6,
                      type: "subject_plate",
                    },
                    widgetList: [],
                    options: {
                      name: "",
                      hidden: false,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-356253525523",
                  },
                ],
                options: {
                  name: "",
                  colWidthRate: "3:3:3:3",
                  hidden: false,
                  gutter: 12,
                  colHeight: 300,
                },
                id: 35625352552,
              },
            ],
            id: "tab-875752389740",
            children: [
              {
                value: "1622539903105142785",
                name: "图片版块",
                limit: 6,
                type: "column_picture",
              },
              {
                value: "1622837202163240962",
                name: "列表版块",
                limit: 6,
                type: "column_list",
              },
              {
                value: "1622841378561757185",
                name: "视频版块",
                limit: 6,
                type: "column_video",
              },
              {
                value: "1622842293201047554",
                name: "专题分类",
                limit: 6,
                type: "subject_plate",
              },
            ],
          },
          {
            name: "tab2",
            key: 2,
            id: "tab-875752389741",
            active: false,
            widgetList: [
              {
                type: "gridTwo",
                category: "container",
                icon: "gridTwo",
                cols: [
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    widgetList: [],
                    plate: {
                      value: "1622837202163240962",
                      name: "列表版块",
                      limit: 6,
                      type: "column_list",
                    },
                    options: {
                      name: "",
                      hidden: false,
                      colWidthRate: 12,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-970765350580",
                  },
                  {
                    type: "grid-col",
                    category: "container",
                    icon: "grid-col",
                    internal: true,
                    plate: {
                      value: "1622841378561757185",
                      name: "视频版块",
                      limit: 6,
                      type: "column_video",
                    },
                    widgetList: [],
                    options: {
                      name: "",
                      hidden: false,
                      span: 12,
                      offset: 0,
                      push: 0,
                      pull: 0,
                      responsive: false,
                      md: 12,
                      sm: 12,
                      xs: 12,
                    },
                    id: "grid-col-970765350581",
                  },
                ],
                options: {
                  name: "",
                  hidden: false,
                  colWidthRate: "6:6",
                  gutter: 12,
                  colHeight: 300,
                },
                id: 97076535058,
              },
            ],
            children: [
              {
                value: "1622837202163240962",
                name: "列表版块",
                limit: 6,
                type: "column_list",
              },
              {
                value: "1622841378561757185",
                name: "视频版块",
                limit: 6,
                type: "column_video",
              },
            ],
          },
        ],
        options: { name: "", hidden: false },
        id: 87575238974,
      },
    ];
    const plateTree = function (widgetlist) {
      const nwidgetlist = JSON.parse(JSON.stringify(widgetlist));
      let flatTree = [];
      const flatTreeFun = (ary) => {
        for (let i = 0; i < ary.length; i++) {
          const item = ary[i];
          if (item.plate) {
            const param = Object.assign({}, item.plate, item.id);
            flatTree.push(param);
          } else {
            let arr;
            if (item.type === "tab") {
              arr = item.tabs;
              arr.forEach((m) => {
                flatTreeFun(m.widgetList);
              });
            } else {
              arr = item.cols;
              arr.forEach((m) => {
                if (m.plate) {
                  m.plate.id = m.id
                  flatTree.push(m.plate)
                } else {
                  flatTreeFun(m.widgetList);
                }
              });
            }
          }
        }
      };

      nwidgetlist.forEach((ele) => {
        let arr;
        if (ele.type === "tab") {
          arr = ele.tabs;
        }
        if (ele.type.indexOf("grid") > -1) {
          arr = ele.cols;
        }
        arr.forEach((v) => {
          let arr2;
          if (v.type === "grid-col") {
            // 第一层是grid
            if (v.plate) {
              // 一层中就有plate, 所以只能是grid 一层直接关联板块了, plate 中需要关联所在的col 地Id
              v.plate.id = v.id;
              if (!ele.children) {
                ele.children = [];
              }
              ele.children = ele.children.concat([v.plate]);

            } else {
              let arr3 = v.widgetList;
              arr3.forEach((j) => {
                // 第二层级( tab 还有grid 都一样的处理)
                if (j.type === "tab") {
                  j.tabs.forEach((tab) => {
                    flatTree = [];
                    flatTreeFun(tab.widgetList);
                    tab.children = flatTree;
                  });
                  if (!ele.children) {
                    ele.children = [];
                  }
                  ele.children = ele.children.concat(j);
                } else {
                  // 第二层级是grid
                  flatTree = [];
                  flatTreeFun([j]);
                  if (!ele.children) {
                    ele.children = [];
                  }
                  ele.children = ele.children.concat(flatTree);
                }
              });
            }
          } else {
            // 第1层是tab， 只能是tab-grid-grid 结构, 直接将所有板块节点放到tab 下方的children 元素中取
            flatTree = [];
            flatTreeFun(v.widgetList);
            v.children = flatTree;
          }
        });
      });

      return nwidgetlist;
    };

    console.log(plateTree(fakeData));
  </script>
</html>
